<template>
    <div class="apply">
	    <Header :show="true">参会报名</Header>
	    <div class="content">
	    	<form action="">
		   		<ul>
		   			<li v-for="item in arrList">
		   				<span class="tit">{{item.character}}:</span>
		   				<input type="text">
		   				<span class="must">{{item.must}}</span>
		   			</li>
		   			<li class="submit"><button @click="submit" type="submit">立 即 报 名</button></li>
		   		</ul>
	   		</form>
	    </div>
 	</div>
</template>

<script>
import Header from '../base/Header'
	export default {
		data() {
			return {
				arrList:{}
			}
		},
        components:{
        	Header
        },
        mounted(){
        	var id = this.$route.params.id;
        	this.fetchData(id);
        },
        methods: {
        	submit(){
        		this.$root.Hub.$emit('applied', 123);
        	},
        	fetchData(id) {
        		let _this = this;
        		this.$http.get('static/data/invite.data')
        		.then(function(res){
        			_this.arrList = res.data[id].content.applyField;
        			_this.i = id;
        			console.log(id)
        		}).catch(function(err){
        			console.log(err);
        		})
        	}
        }
	}
</script>

<style scoped lang="less">
.apply{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 11;
	background: #f4f4f4;
	.content{
		padding: 60px 10px;
		font-size: 0.24rem;
		background: #f4f4f4;
		p{
			color: #ff6100;
			line-height: 0.8rem;
			padding-left: 0.3rem;
		}
		ul{
			li{
				background: #fff;
				padding: 0 0.2rem;
				border-bottom: 0.1px solid #888;
				height: 0.84rem;
				line-height: 0.84rem;
				.tit{
					font-weight: bold;
					color: #333;
				}
				input{
					border: none;
					height: 0.45rem;
					width: 60%;
				}
				.must{
					color: #f00;
					float: right;
				}
			}
			.submit{
				text-align: center;
				button{
					width: 75%;
					height: 0.66rem;
					border-radius: 20px;
					color: #eee;
					font-size: 0.32rem;
					border: none;
					outline: none;
					 background: -webkit-linear-gradient(#fff,#eda273 15%,#ff6100 50%); 
					 /* Safari 5.1 - 6.0 */
					 /* background: -o-linear-gradient(red, green, blue); /* Opera 11.1 - 12.0 */
					  /*background: -moz-linear-gradient(red, green, blue); /* Firefox 3.6 - 15 */
					  /*background: linear-gradient(red, green, blue); /* 标准的语法 */
				}
			}
		}
	}
}
</style>